<template>
  <el-input class="b" v-model="filterText" placeholder="请输入关键字" v-if="props.showFilter" />
  <el-tree
    class="tree-line"
    ref="treeRef"
    :indent="0"
    :load="loadNode"
    :filter-node-method="filterNode"
    lazy
    show-checkbox
    :expand-on-click-node="false"
    node-key="nodeKey"
    :default-expanded-keys="[1]"
    :current-node-key="3"
    @current-change="changeNode"
    @check-change="changeCheck"
    v-bind="$attrs"
  >
    <template #default="{ node, data }">
      <span v-if="data.groupName">
        <FolderOpened style="width: 20px; height: 20px; vertical-align: -4px" />
        <span>{{ data }}</span>
        <span>{{ node.groupName }}</span>
      </span>
      <span v-if="data.subTypeName">
        <Iphone style="width: 20px; height: 20px; vertical-align: -4px" />
        <span>{{ data.subTypeName + data.deviceSn }}</span>
      </span>
      <div v-if="data.subTypeName === 'a33'" class="none-click" @click.stop></div>
    </template>
  </el-tree>
</template>

<script setup lang="ts">
  // tree
  import { ref, watch } from 'vue'
  import Node from 'element-plus/es/components/tree/src/model/node'
  import { ElTree } from 'element-plus'

  const props = defineProps<{
    showFilter: boolean
  }>()

  // 过滤
  let filterText = ref('')
  const treeRef = ref<InstanceType<typeof ElTree>>()
  interface Tree {
    [key: string]: any
  }
  watch(filterText, (val) => {
    console.log(treeRef.value)
    treeRef.value!.filter(val)
  })
  function filterNode(value: string, data: Tree) {
    if (!value) return true
    return data.label!.includes(value)
  }
  const emit = defineEmits<{
    aaa: { id: string }
  }>()
  function changeNode(node: any, data: any) {
    console.log('changeNode', node, data)
    emit('aaa', { node, data})
  }
  function changeCheck(node: any) {
    console.log('changeCheck', node)
  }
  interface Tree {
    label?: string
    subTypeName?: string
    deviceId?: string
    deviceSn?: string
    leaf?: boolean
    class?: any
    nodeKey?: number
  }
  let nodeKeyMax = 0
  function loadNode(node: Node, resolve: (data: Tree[]) => void) {
    if (node.level === 1) {
      nodeKeyMax = nodeKeyMax + 1
      let data: Tree[] = [
        {
          label: '打动送a1打3123',
          subTypeName: '打动送a1打3123',
          deviceId: '1',
          deviceSn: '1'
        },
        {
          label: 'a33',
          subTypeName: 'a33',
          deviceId: '2',
          deviceSn: '3'
        },
        {
          label: '打动送a3',
          subTypeName: '打动送a3',
          deviceId: '3',
          deviceSn: '3'
        }
      ]
      data.forEach((i, idx) => {
        i.leaf = true
        i.nodeKey = idx + nodeKeyMax
      })
      nodeKeyMax = data[data.length - 1].nodeKey as number
      setTimeout(() => {
        resolve(data)
      }, 500)
    }
    if (node.level === 2) return resolve([])
  }
</script>

<style scoped lang="scss">
  .tree-line :deep {
    overflow: auto;
    width: 100%;
    height: 200px;
    // 缩进量
    .el-tree-node {
      position: relative;
      padding-left: 6px;
    }
    // 缩进量
    .el-tree-node__children {
      padding-left: 16px;
    }
    // 竖线
    .el-tree-node::before {
      position: absolute;
      top: -26px;
      left: -3px;
      width: 1px;
      height: 100%;
      content: '';
      border-width: 1px;
      border-left: 1px dashed #52627c;
    }
    // 当前层最后一个节点的竖线高度固定
    .el-tree-node:last-child::before {
      height: 38px;
    }
    // 横线
    .el-tree-node::after {
      position: absolute;
      top: 12px;
      left: -3px;
      width: 24px;
      height: 20px;
      content: '';
      border-width: 1px;
      border-top: 1px dashed #52627c;
    }
    // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
    & > .el-tree-node::after {
      border-top: none;
    }
    & > .el-tree-node::before {
      border-left: none;
    }
    // 展开关闭的icon
    .el-tree-node__expand-icon {
      font-size: 16px;
      // 叶子节点（无子节点）
      & :deep(.is-leaf) {
        width: 1px;
        color: transparent;
        // display: none;
      }
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgba(0, 0, 0, 0);
    }
    .is-current > .el-tree-node__content {
      background-color: red !important;
    }
    .el-tree-node__content:hover {
      background-color: red;
    }
    .none-box .el-checkbox {
      display: none;
    }
    .is-expanded {
      display: inline-block;
    }
    .el-tree-node__content > .none-click {
      cursor: not-allowed;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
    }
  }
</style>